<template>
	<div class="hello">
		<div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
			<div class="slideshow">

				<li v-for="(img, index) in imgArray" :key="index" :style="{opacity:(index)==mark?'1':'0'}" class="tou">
					<a href="#">
						<img :src='img.goodsImg'>
					</a>
				</li>

			</div>
			<div class="bullet">
				<span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" @click="change(index)" :key="index">
				</span>
			</div>

			<button @click="prev()">向左</button>
			<button @click="next()">向右</button>
		</div>
	</div>
</template>

<script scoped>
	import axios from 'axios'
	export default {
		name: 'HelloWorld',
		data() {
			return {
				timer: null,
				mark: 0,
				imgArray: [
				/*
					{
						src: require('../assets/1.jpg'),
					},
					{
						src: require('../assets/2.jpg'),
					},
					{
						src: require('../assets/3.jpg'),
					},
					{
						src: require('../assets/4.jpg'),
					},
					{
						src: require('../assets/5.jpg'),
					},
				*/
				]
			}
		},
		methods: {
			autoPlay() {
				this.mark++;
				if(this.mark === this.imgArray.length) {
					this.mark = 0
				}
			},
			play() {
				this.timer = setInterval(this.autoPlay, 2500)
			},
			change(i) {
				this.mark = i
			},
			stop() {
				clearInterval(this.timer)
			},
			move() {
				this.timer = setInterval(this.autoPlay, 2500)
			},
			prev() {
				this.mark--;
				if(this.mark === -1) {
					this.mark = this.imgArray.length - 1
				}
			},
			next() {
				this.mark++;
				if(this.mark === this.imgArray.length) {
					this.mark = 0
				}
			}
		},
		created() {
			this.play();
			//http://jspang.com/DemoApi/typeGoods.php
			axios.get('http://jspang.com/DemoApi/typeGoods.php')
				.then(response => {
					console.log(response);
					this.imgArray = response.data[0];

				})
				.catch(error => {
					console.log(error);
					alert('你网络有病 别玩了');
				})
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	.slide {
		width: 1000px;
		margin: 0 auto;
		margin-top: 50px;
		overflow: hidden;
		position: relative;
	}
	
	.slideshow {
		width: 1000px;
		height: 320px;
	}
	
	li {
		position: absolute;
	}
	
	img {
		width: 1000px;
		height: 320px;
	}
	
	.bar {
		position: absolute;
		width: 100%;
		bottom: 10px;
		margin: 0 auto;
		z-index: 10;
		text-align: center;
	}
	
	.bar span {
		width: 20px;
		height: 5px;
		border: 1px solid;
		background: white;
		display: inline-block;
		margin-right: 10px;
	}
	
	.bullet {
		position: absolute;
		left: 45%;
		margin-top: -40px;
	}
	
	.bullet span {
		display: inline-block;
		width: 10px;
		height: 10px;
		background: palegreen;
		border-radius: 50%;
		margin-left: 10px;
		border: 10px solid palevioletred;
	}
	
	button {
		margin-top: 20px;
		margin-right: 20px;
	}
	
	.tou {
		transition: all 1s;
	}
	
	.active {
		background: red !important;
	}
</style>